<template>
  <div style="background-color:#f5f5f5">
    <div class="g-bd">
      <div class="g-wrap list-body">
        <div class="list-title">
          <h3 class="type">
            <span>全部</span>
            <a href="javascript:;" class="btns select-type" @click="this.showCateList = !this.showCateList">
              <i>
                选择分类
                <em class="icon tp-icon"></em>
              </i>
            </a>
          </h3>
          <div class="btn-hot button">
            <a href="javascript:;">热门</a>
          </div>
        </div>
        <div class="cate-list" v-show="this.showCateList">
          <div class="hd">
            <i class="hd-icon"></i>
          </div>
          <div class="bd">
            <h3>
              <a href="javascript:;" class="allType" @click="selectType('全部')">全部风格</a>
            </h3>
            <dl>
              <dt class="bd-title">
                <i class="icon icon-1"></i>语种
              </dt>
              <dd>
                <span v-for="(item, i) in languagesList" :key="i">
                  <a href="javascript:;" @click="selectType(item)">{{item}}</a>
                  <span class="bd-line">|</span>
                </span>
              </dd>
            </dl>
            <dl>
              <dt class="bd-title">
                <i class="icon icon-2"></i>风格
              </dt>
              <dd>
                <span v-for="(item, i) in styleList" :key="i">
                  <a href="javascript:;" @click="selectType(item)">{{item}}</a>
                  <span class="bd-line">|</span>
                </span>
              </dd>
            </dl>
            <dl>
              <dt class="bd-title">
                <i class="icon icon-3"></i>场景
              </dt>
              <dd>
                <span v-for="(item, i) in sceneList" :key="i">
                  <a href="javascript:;" @click="selectType(item)">{{item}}</a>
                  <span class="bd-line">|</span>
                </span>
              </dd>
            </dl>
            <dl>
              <dt class="bd-title">
                <i class="icon icon-4"></i>感情
              </dt>
              <dd>
                <span v-for="(item, i) in feelingList" :key="i">
                  <a href="javascript:;" @click="selectType(item)">{{item}}</a>
                  <span class="bd-line">|</span>
                </span>
              </dd>
            </dl>
            <dl>
              <dt class="bd-title">
                <i class="icon icon-5"></i>主题
              </dt>
              <dd>
                <span v-for="(item, i) in themeList" :key="i">
                  <a href="javascript:;" @click="selectType(item)">{{item}}</a>
                  <span class="bd-line">|</span>
                </span>
              </dd>
            </dl>
          </div>
          <div class="ft">

          </div>
        </div>
        <ul class="song-lists">
          <li v-for="item in songsList" :key="item.id">
            <div class="songs-bg">
              <img :src="item.coverImgUrl + '?param=140y140'">
              <a :href="'http://localhost:8080/#/playList/?id=' + item.id" class="msk"></a>
              <div class="rmd-llbtm">
                <a href="javascript:;" class="icon-play" @click.prevent="switchPL(item.id)"></a>
                <i class="icon-headset"></i>
                <i class="count">{{(item.playCount / 10000).toFixed(1) + '万'}}</i>
              </div>
            </div>
            <p class="dec">
              <a :href="'http://localhost:8080/#/playList/?id=' + item.id" class="sl-name overel">{{item.name}}</a>
            </p>
            <p>
              <span style="color:#999">by</span>
              <a class='overel sl-author'
                :href="'http://localhost:8080/#/playList/?id=' + item.id">{{item.creator.nickname}}</a>
            </p>
          </li>
        </ul>
        <!-- 分页功能栏 封装进page子组件 -->
        <Page :curPage="curPage" :totalPage="totalPage" :midPagesList="midPagesList" @prev="prevPage" @next="nextPage"
          @changeP="changePage">
        </Page>
      </div>
    </div>
  </div>
</template>

<script>
import Page from '../../components/Page/page.vue'
import { mapMutations } from 'vuex'
export default {
  name: "PlayList",
  components: {
    'Page': Page
  },
  data () {
    return {
      cat: '全部',
      order: 'hot',
      curPage: 1,
      totalSongsNum: 0,
      totalPage: 0,
      songsList: [],
      midPagesList: [],
      showCateList: false,
      languagesList: ['华语', '欧美', '日语', '韩语', '粤语'],
      styleList: ['流行', '摇滚', '民谣', '电子', '舞曲', '说唱', '轻音乐', '爵士', '乡村', 'R&B/Soul', '古典', '民族', '英伦', '金属', '朋克', '蓝调', '雷鬼', '世界音乐', '拉丁', 'New Age', '古风', '后摇', 'Bossa Nova'],
      sceneList: ['清晨', '夜晚', '学习', '工作', '午休', '下午茶', '地铁', '驾车', '运动', '旅行', '散步', '酒吧'],
      feelingList: ['怀旧', '清新', '浪漫', '伤感', '治愈', '放松', '孤独', '感动', '兴奋', '快乐', '安静', '思念'],
      themeList: ['综艺', '影视原声', 'ACG', '儿童', '校园', '游戏', '70后', '80后', '90后', '网络歌曲', 'KTV', '经典', '翻唱', '吉他', '钢琴', '器乐', '榜单', '00后']
    }
  },
  methods: {
    ...mapMutations(['switchPlayList']),
    prevPage () {
      if (this.curPage == 1) {
        return
      } else {
        this.curPage--
        this.getSongs()
      }
    },
    nextPage () {
      if (this.curPage == this.totalPage) {
        return
      } else {
        this.curPage++
        this.getSongs()
      }
    },
    async getSongs () {
      const { data: songs } = await this.$http.get('top/playlist', {
        params: {
          cat: this.cat,
          order: this.order,
          limit: 35,
          offset: (this.curPage - 1) * 35
        }
      })
      this.totalSongsNum = songs.total;
      this.songsList = songs.playlists;
      this.totalPage = Math.ceil(songs.total / 35);
      if (this.totalPage < 8) {
        for (let i = 2; i < this.totalPage; i++) {
          this.midPagesList.push(i)
        }
        return
      }
      if (this.curPage <= 5 || this.curPage == 1) {
        this.midPagesList = [2, 3, 4, 5, 6, 7, 8]
        return
      }
      if (this.curPage >= this.totalSongsNum - 4 || this.curPage == this.totalPage) {
        this.midPagesList = [this.curPage - 7, this.curPage - 6, this.curPage - 5, this.curPage - 4, this.curPage - 3, this.curPage - 2, this.curPage - 1]
        return
      }
      this.midPagesList = [this.curPage - 3, this.curPage - 2, this.curPage - 1, this.curPage, this.curPage + 1, this.curPage + 2, this.curPage + 3]
    },
    changePage (val) {
      if (this.curPage == val) {
        return
      }
      this.curPage = val;
      this.getSongs();
    },
    selectType (val) {
      this.cat = val;
      this.curPage = 1;
      this.getSongs();
    },
    async switchPL (id) {
      let { data: pl } = await this.$http.get('playlist/detail', {
        params: {
          id: id
        }
      })
      pl = pl.playlist.tracks;
      this.switchPlayList(pl);
      this.$store.dispatch('getlyric', pl[0].id)
    }
  },
  created () {
    if (this.$route.query.cat || this.$route.query.order) {
      this.cat = this.$route.query.cat;
      this.order = this.$route.query.order;
    }
    this.getSongs()
  },
};
</script>

<style lang="less" scoped>
.list-body {
  position: relative;
}
.list-title {
  display: flex;
  justify-content: space-between;
  height: 40px;
  border-bottom: 2px solid #c20c0c;
}
.type {
  height: 32px;
  display: flex;
  font-size: 24px;
  font-weight: normal;
  align-items: center;
}
.select-type {
  display: inline-block;
  height: 31px;
  font-size: 12px;
  line-height: 31px;
  margin-left: 12px;
  margin-top: 2px;
  padding-right: 5px;
  overflow: hidden;
  background-color: #fafafa;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  text-align: center;
  i {
    color: #0ca0cd;
    padding: 0 10px 0 15px;
    .tp-icon {
      display: inline-block;
      width: 8px;
      height: 5px;
      margin-left: 5px;
      background-position: -70px -543px;
    }
  }
}
.btn-hot {
  height: 29px;
  background-position: 0 0;
  border-radius: 3px;
  a {
    display: inline-block;
    width: 46px;
    line-height: 29px;
    text-align: center;
    color: #fff;
    &:hover {
      text-decoration: underline;
    }
  }
}
.song-lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px 0 0 -50px;
  li {
    display: inline-block;
    width: 140px;
    height: 188px;
    overflow: hidden;
    padding-left: 50px;
    padding-bottom: 30px;
    .songs-bg {
      position: relative;
      width: 140px;
      height: 140px;
    }
    .dec {
      margin: 8px 0 3px;
      font-size: 14px;
      .sl-name {
        display: inline-block;
        width: 100%;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .sl-author {
      margin-left: 3px;
      &:hover {
        max-width: 76%;
        text-decoration: underline;
      }
    }
  }
}
.cate-list {
  z-index: 20;
  width: 720px;
  position: absolute;
  left: 0px;
  top: 75px;
  .hd,
  .bd,
  .ft {
    background: url("../../assets/sltlyr.png") no-repeat 0 9999px;
  }
  .hd {
    height: 32px;
    background-position: 0 0;
    .hd-icon {
      position: absolute;
      width: 24px;
      height: 11px;
      left: 165px;
      background-position: -48px 0;
    }
  }
  .bd {
    width: 700px;
    padding-left: 20px;
    background-position: -720px 0;
    background-repeat: repeat-y;
    h3 {
      height: 37px;
      padding-left: 26px;
      font-weight: normal;
      border-bottom: 1px solid #e6e6e6;
      .allType {
        display: inline-block;
        height: 26px;
        line-height: 26px;
        text-align: center;
        width: 75px;
        border: 1px solid #bebebe;
        border-radius: 3px;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    dl {
      .bd-title {
        float: left;
        width: 70px;
        padding-top: 15px;
        font-weight: bold;
        .icon-1,
        .icon-2,
        .icon-3,
        .icon-4,
        .icon-5 {
          display: inline-block;
          width: 23px;
          height: 23px;
          margin: 0 8px 4px 0;
        }
        .icon-1 {
          background-position: -20px -735px;
        }
        .icon-2 {
          background-position: 0 -60px;
        }
        .icon-3 {
          background-position: 0 -90px;
        }
        .icon-4 {
          background-position: 0 -117px;
        }
        .icon-5 {
          background-position: 0 -140px;
        }
      }
      &::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
      }
    }
    dd {
      display: flex;
      flex-wrap: wrap;
      margin-left: 96px;
      line-height: 24px;
      padding: 16px 15px 0 15px;
      border-left: 1px solid #e6e6e6;
      a {
        color: #666;
        &:hover {
          text-decoration: underline;
        }
      }
      .bd-line {
        color: #e4e4e4;
        margin: 0 8px 0 10px;
      }
    }
  }
  .ft {
    height: 32px;
    background-position: -1440px 0;
  }
}
</style>